<template>
  <div class="app-container">
    <el-tabs
      v-model="tabNum"
      :tab-position="tabPosition"
      type="border-card"
      style="height: calc(100vh - 120px)"
      class="demo-tabs"
    >
      <el-tab-pane label="按行业分类工资限额设置 ">
        <payrollSetting v-if="tabNum === '0'"></payrollSetting>
      </el-tab-pane>
      <el-tab-pane label="考勤代发状态配置">
        <attendanceSetting v-if="tabNum === '1'"></attendanceSetting>
      </el-tab-pane>
      <el-tab-pane label="人员月度工资限额设置">
        <monthpayrollsetting v-if="tabNum === '2'"></monthpayrollsetting>
      </el-tab-pane>
      <!-- <el-tab-pane label="快捷配置入口"> </el-tab-pane>
      <el-tab-pane label="添加配置项"> </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script lang="ts">
export default {
  name: "Configuration",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import payrollSetting from "@/views/system/configuration/common/payrollSetting.vue";
import monthpayrollsetting from "@/views/system/configuration/common/monthpayrollsetting.vue";
import attendanceSetting from "@/views/system/configuration/common/attendanceSetting.vue";

const tabNum = ref("0");
const tabPosition = ref("top");
</script>

<style scoped lang="less">
.config_body {
  width: 100%;
  min-height: calc(100vh - 110px);
}

.app-container {
  height: 100%;
  min-height: calc(100vh - 84px);
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
